<template>
  <div class="resource-apply">
    <Crumbs :title="orderNo !== undefined ? '资源申请工单' : '资源申请新增'" />
    <div class="main">
      <div class="title-info">工单详情</div>
      <el-row>
        <el-form
          :inline="true"
          :model="formData"
          size="small"
          ref="formref"
          :rules="formrules"
        >
          <el-form-item label="工单类型" prop="orderType">
            <el-select
              v-model="formData.orderType"
              placeholder="工单类型"
              clearable
              :disabled="operationFlat == true ? false : true"
            >
              <el-option label="PaaS资源申请" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工单描述" prop="orderDesc">
            <el-input
              v-model="formData.orderDesc"
              placeholder="工单描述"
              :disabled="operationFlat == true ? false : true"
            ></el-input>
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-select
              v-model="formData.priority"
              placeholder="优先级"
              clearable
              :disabled="operationFlat == true ? false : true"
            >
              <el-option label="紧急" value="0"></el-option>
              <el-option label="高" value="1"></el-option>
              <el-option label="中" value="2"></el-option>
              <el-option label="低" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="截止日期" prop="endDate">
            <el-date-picker
              v-model="formData.endDate"
              type="date"
              :picker-options="expireTimeOption"
              value-format="yyyy-MM-dd"
              clearable
              placeholder="选择时间"
              :disabled="operationFlat == true ? false : true"
            />
          </el-form-item>
        </el-form>
      </el-row>
      <div class="title-info">申请资源列表</div>
      <el-row v-if="operationFlat">
        <!-- @click="addResource" -->
        <el-button size="small" type="primary" @click="petitonBtn"
          >申请资源</el-button
        >
        <el-button size="small" type="primary" @click="batchdelete"
          >批量删除</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="tableEditable = true"
          :disabled="tableEditable"
          >编辑</el-button
        >
        <el-button size="small" type="primary" @click="saveTable"
          >保存</el-button
        >
      </el-row>
      <br />
      <el-row>
        <el-table
          :select-on-indeterminate="true"
          :data="resourceApplyList"
          ref="resourceref"
        >
          <el-table-column type="selection" />
          <el-table-column label="资源名称">
            <template slot-scope="scope">
              <template v-if="tableEditable">
                <span> {{ scope.row.authObjectDesc }}</span>
              </template>
              <template v-else>
                <span>{{ scope.row.authObjectDesc }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="资源使用期限" prop="serviceLife">
            <template slot-scope="scope">
              <template v-if="tableEditable">
                <el-date-picker
                  :picker-options="expireTimeOption"
                  v-model="scope.row.serviceLife"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  @blur="dateBlur"
                >
                </el-date-picker>
              </template>
              <template v-else>
                {{ scope.row.serviceLife }}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <template v-if="tableEditable">
                <el-input
                  v-model="scope.row.remark"
                  size="small"
                  style="width: 50%"
                />
              </template>
              <template v-else>
                {{ scope.row.remark }}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="
                  infoDialogVisible = true
                  infoData = [scope.row]
                "
                >资源详情</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="deletescope(scope.row)"
                v-if="operationFlat"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <br />
      <div v-if="orderNoflat">
        <div class="title-info">工单流转轨迹</div>
        <el-row>
          <el-table
            :data="tableData2"
            stripe
            :header-cell-style="{ backgroundColor: '#FAFAFA' }"
          >
            <el-table-column prop="createBy" label="处理人" />
            <el-table-column prop="createdTime" label="处理时间" />
            <el-table-column prop="operType" label="操作">
              <template slot-scope="scope">
                <span v-if="scope.row.operType === '1'">回复</span>
                <span v-if="scope.row.operType === '2'">转派</span>
                <span v-if="scope.row.operType === '3'">关闭</span>
              </template>
            </el-table-column>
            <el-table-column prop="operOpinions" label="操作意见" />
          </el-table>
        </el-row>
        <div v-if="roamflat == '2'">
          <div class="title-info">工单操作</div>
          <el-form
            :model="roamformInline"
            label-width="80px"
            :rules="roamrules"
            ref="roamdialog"
          >
            <el-row type="flex">
              <el-col :span="8">
                <el-form-item label="操作类型" prop="operType">
                  <el-select
                    v-model="roamformInline.operType"
                    style="width: 350px"
                    placeholder=""
                    clearable
                    @change="opachange"
                  >
                    <el-option label="回复" value="1"></el-option>
                    <el-option label="转派" value="2" v-if="deleteflat == false"></el-option>
                    <el-option label="关闭" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="转派角色" prop="character">
                  <el-select
                    v-model="roamformInline.character"
                    style="width: 350px"
                    placeholder=""
                    clearable
                    @change="characterchange"
                    :disabled="reassignment"
                  >
                    <el-option
                      v-for="item in characteroptions"
                      :key="item.roleId"
                      :label="item.roleName"
                      :value="item.roleId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="转派用户" prop="roleId">
                  <el-select
                    v-model="roamformInline.roleId"
                    style="width: 350px"
                    placeholder=""
                    clearable
                    :disabled="reassignment"
                  >
                    <el-option
                      v-for="item in roleIdoptions"
                      :key="item.optionValue"
                      :label="item.optionText"
                      :value="item.optionValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <br />
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="操作意见" prop="operOpinions">
                  <el-input
                    type="textarea"
                    style="width: 1000px"
                    v-model="roamformInline.operOpinions"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <br />
      </div>
      <br />
      <el-row type="flex" justify="center">
        <el-button
          size="small"
          @click="$router.push('/resApplyWorkOrderManagement')"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </el-row>
    </div>
    <!-- 添加资源对话框 -->
    <el-dialog
      title="申请资源"
      :visible.sync="petitionDialogVisible"
      width="50%"
      v-if="petitionDialogVisible"
      id="petition"
    >
      <template>
        <el-table
          :data="petitionData"
          style="width: 100%"
          row-key="authObjectId"
          :show-header="false"
          ref="petitionTable"
          @select="selectionTick"
        >
          <el-table-column type="selection" width="42" :selectable="selectable">
          </el-table-column>
          <el-table-column prop="authObjectDesc" label=""> </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="petitionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="treeDialogSub">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 确定时间的选择 -->
    <el-dialog
      title="申请资源"
      :visible.sync="timeDialogVisible"
      width="50%"
      v-if="timeDialogVisible"
    >
      <div>
        <el-form
          :model="timeForm"
          :rules="timerules"
          ref="timeRef"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="资源使用期限" prop="serviceLife">
            <el-date-picker
              v-model="timeForm.serviceLife"
              :picker-options="expireTimeOption"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="timeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="timeDialogSub">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 资源详情的对话框 -->
    <el-dialog
      title="资源详情"
      :visible.sync="infoDialogVisible"
      width="50%"
      v-if="infoDialogVisible"
    >
      <div>
        <el-tree
          :data="infoData"
          :props="{ children: 'children', label: 'authObjectDesc' }"
          default-expand-all
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="infoDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 转派显示控制
       deleteflat: true,
      infoData: [],
      // 资源详情的控制
      infoDialogVisible: false,
      // 申请资源树的资源暂存
      petitionDataCopy: [],
      // 转派的控制
      reassignment: true,
      // 列表的所有id
      timeForm: {
        serviceLife: '',
      },
      timerules: {
        "serviceLife": [
          { required: true, message: '请选择资源使用期限', trigger: 'blur' },
        ],
      },
      timeDialogVisible: false,
      petitionData: [],
      petitionDialogVisible: false,
      //设置失效日期今天之前的日期不可选
      expireTimeOption: {
        disabledDate (date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      operationFlat: false,
      roamflat: '',
      roamrules: {
        operType: [
          { required: true, message: '请选择操作类型', trigger: 'change' },
        ],
        character: [
          { required: false, message: '请选择转派角色', trigger: 'change' },
        ],
        roleId: [
          { required: false, message: '请选择转派用户', trigger: 'change' },
        ],
        operOpinions: [
          { required: true, message: '请输入操作意见', trigger: 'change' },
          { max: 200, message: '长度在 200个字符内', trigger: 'change' }
        ],
      },
      roamformInline: {
        operType: '',
        character: '',
        roleId: '',
        operOpinions: '',
      },
      characteroptions: [],
      roleIdoptions: [],
      tableData2: [],
      orderNo: '',
      orderNoflat: false,
      formrules: {
        orderType: [
          { required: true, message: '请选择工单类型', trigger: 'change' },
        ],
        orderDesc: [
          { required: true, message: '请输入工单描述', trigger: 'change' },
          {  max: 200, message: '长度在200个字符内', trigger: 'change' }
        ],
        priority: [
          { required: true, message: '请选择优先级', trigger: 'change' },
        ],
        endDate: [
          { required: true, message: '请选择截止日期', trigger: 'change' },
        ],
      },
      tableEditable: false,//表格是否处于编辑状态
      formData: {
        orderType: '',
        orderDesc: '',
        priority: '',
        endDate: '',
      },
      resourceApplyList: [],
      roamflat: '',
      // 资源续期的值
      resIds: null
    }
  },
  created () {
    this.resIds = this.$route.query.resIds
    console.log(this.resIds)
    if (this.resIds !== undefined) {
      this.resIds = JSON.parse(this.$route.query.resIds)
    }
    // 新增的树
    
    // 根据参数判断是流转还是新增
    this.orderNo = this.$route.query.orderNo
    // 订单号 流转
    console.log(this.orderNo)
    // 资源续期参数
    Promise.all([this.getTreedata()]).then(res => {
      console.log('12323')
      if (this.orderNo !== undefined) {
        this.orderNoflat = true
        // 获取信息
        this.getselect()
        this.getdata()
        if (this.$store.state.loginUser.userId == '1') {
          this.deleteflat = false
        }
      } else {
        this.operationFlat = true
      }
    })

  },
  methods: {
    // 申请资源选择项变化触发的函数
    selectionTick (selection, row) {//selection所有的勾选项，row 当前勾选的数据
      console.log(selection, row)
      // 判断是勾选还是取消勾选 
      let selected = selection.length && selection.indexOf(row) !== -1 //true 0 两种结果
      console.log(selected)
      if (selected) {
        if (row.depend.length > 0) {
          console.log(row.depend)
          // 先判断这个依附项有没有勾选  否则可能弹出很频繁
          let confirmFlat = true
          row.depend.forEach(item => {
            selection.forEach(ele => {
              console.log(item, ele, item.id == ele.authObjectId)
              if (item.id == ele.authObjectId) {
                confirmFlat = false
              }
            })
          })
          if (confirmFlat == false) return
          // 处理显示的依附资源名称
          let name = []
          row.depend.forEach(item => {
            name.push(item.name)
          })
          // 弹出提示关联的信息
          this.$confirm(`资源${row.authObjectDesc}与资源${name.toString()}存在依附关系,同步勾选所有相关资源。`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            //  确定的事件  勾选依附关系项
            this.petitionData.forEach(item => {
              row.depend.forEach(ele => {
                if (item.authObjectId == ele.id) {
                  this.$refs.petitionTable.toggleRowSelection(item, true)
                }
              })
            })
          }).catch(() => {
            //取消的事件 取消勾选当前项 
            this.$refs.petitionTable.toggleRowSelection(row, false)
          })
        }
      } else {
        // 取消勾选
        if (row.unDepend.length > 0 && selection.length > 0) {
          console.log(row.unDepend)
          let name = []
          row.unDepend.forEach(item => {
            name.push(item.name)
          })
          // 弹出提示关联的信息
          this.$confirm(`资源${row.authObjectDesc}与资源${name.toString()}存在依附关系,同步取消勾选所有相关资源。`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            //  确定的事件  勾选依附关系项
            this.petitionData.forEach(item => {
              row.unDepend.forEach(ele => {
                if (item.authObjectId == ele.id) {
                  this.$refs.petitionTable.toggleRowSelection(item, false)
                }
              })
            })
          }).catch(() => {
            //取消的事件 取消勾选当前项和所被依附的资源
            console.log('12121')
            this.$refs.petitionTable.toggleRowSelection(row, true)
          })
        }
      }

    },
    dateBlur () {
      this.resourceApplyList = JSON.parse(JSON.stringify(this.resourceApplyList))
    },
    // 申请资源表格是否可被勾选
    selectable (row, index) {
      if (row.tick == true) {
        return true
      } else {
        return false
      }
    },
    // 操作类型变化
    opachange (val) {
      // 如果是转派
      if (val == '2') {
        // 才填
        this.reassignment = false
        // 校验改变
        this.roamrules.character = [
          { required: true, message: '请选择转派角色', trigger: 'change' },
        ]
        this.roamrules.roleId = [
          { required: true, message: '请选择转派用户', trigger: 'change' },
        ]
      } else {
        this.reassignment = true
        // 清空数据
        this.roamformInline.character = ''
        this.roamformInline.roleId = ''
        // 清空转派校验的文字
        this.$refs.roamdialog.clearValidate(['character', 'roleId'])
        this.roamrules.character = [
          { required: false, message: '请选择转派角色', trigger: 'change' },
        ]
        this.roamrules.roleId = [
          { required: false, message: '请选择转派用户', trigger: 'change' },
        ]
      }
    },
    // 申请资源按钮
    petitonBtn () {
      // 处理数据  准备回显
      // 删除掉remark数据
      this.petitionData.forEach(item=>{
        delete item.remark
      })
      console.log(this.resourceApplyList)
      this.petitionDialogVisible = true
      // 回显禁用的处理
      this.petitionData.forEach(item => {
        item.tick = true
      })
      console.log(this.petitionData)
      console.log(this.resourceApplyList)
      this.$nextTick(() => {
        // 循环选中赋值
        for (let i = 0; i < this.petitionData.length; i++) {
          for (let j = 0; j < this.resourceApplyList.length; j++) {
            if (this.petitionData[i].authObjectId == this.resourceApplyList[j].authObjectId) {
              // 给表格数据添加不可勾选的属性
              this.petitionData[i].tick = false
              this.$refs.petitionTable.toggleRowSelection(this.petitionData[i], true);
            }
          }
        }
        console.log(this.petitionData)
      })
    },
    // 对话框树的确定按钮
    treeDialogSub () {
      this.petitionDataCopy = []
      this.petitionDataCopy = this.$refs.petitionTable.selection
      // 开启时间对话框  和  关闭树对话框
      this.petitionDialogVisible = false
      this.timeDialogVisible = true
      console.log(this.petitionDataCopy)
    },
    // 时间对话框的确定事件
    timeDialogSub () {
      this.$refs["timeRef"].validate((valid) => {
        if (valid) {
          // 添加数据到表格
          // 先获取树的数据
          console.log(this.petitionDataCopy)
          console.log(this.timeForm)
          // 首先和列表对比去重  再进行添加时间的处理
          // 判断有没有同样的id数据,有的话去除
          let newArr = this.petitionDataCopy.filter((v) =>
            this.resourceApplyList.every((val) => val.authObjectId != v.authObjectId)
          )
          newArr.forEach(item => {
            item.serviceLife = this.timeForm.serviceLife
          })
          this.resourceApplyList.push(...newArr)
          console.log(this.resourceApplyList)
          // this.resourceApplyList = this.petitionDataCopy
          this.timeDialogVisible = false
          this.timeForm.serviceLife = ''
          //自动进入编辑状态
          this.tableEditable = true;
        }
      })
    },
    getTreedata () {
      // 添加了依附关系的树结构接口 
      return new Promise((resolve, reject) => {
        this.$http({
          url: "/api/resources/depend/listPaasRes",
          method: 'get'
        }).then(res => {
          this.petitionData = res.data.rows
          this.petitionData.forEach(item => {
            item.tick = true
          })
          // 
         
          if (this.resIds !== undefined) {
            // 进行资源续期的处理  根据id赋值
            this.resIds.forEach(item => {
              this.petitionData.forEach(ele => {
                if (item == ele.authObjectId) {
                  this.resourceApplyList.push(ele)
                  return
                }
              })
            })
            console.log(this.resourceApplyList)
            this.tableEditable = true
          }
          resolve(res);
        })
      })
    },
    getselect () {
      this.$http({
        url: `/api/system/userRole/selectRoleList`,
        method: 'get',
      }).then(res => {
        this.characteroptions = res.data.data
      })
    },
    characterchange (val) {
      this.roamformInline.roleId = ''
      if (val === '') {
        this.roleIdoptions = []
      } else {
        this.$http({
          url: `/api/system/userRole/selectRoleUserList/${val}`,
          method: 'get',
        }).then(res => {
          this.roleIdoptions = res.data.data
        })
      }
    },
    getdata () {
      this.$http({
        url: `/api/work/order/apply/${this.orderNo}`,
        method: 'get'
      }).then(res => {
        console.log(res)
        this.formData.orderType = res.data.data.orderType
        this.formData.orderDesc = res.data.data.orderDesc
        this.formData.priority = res.data.data.priority
        this.formData.endDate = res.data.data.endDate
        let tabeldata = []
        res.data.data.resourceApplyList.forEach(item => {
          this.petitionData.forEach(item2 => {
            if (item2.authObjectId == item.resourceId) {
              tabeldata.push({
                ...item2,
                serviceLife: item.serviceLife,
                remark: item.remark,
                resApplyId:item.resApplyId
              })
            }
          })
        })
        this.resourceApplyList = tabeldata
        console.log(tabeldata, 'aaaa')
        console.log(this.resourceApplyList)
        this.tableData2 = res.data.data.workOrderTrackList
        this.roamflat = res.data.data.workStatus
        // 判读是不是创建人  控制添加修改的按钮显示隐藏
        if (this.$store.state.loginUser.userId == res.data.data.creator && res.data.data.workStatus == '2') {
          this.operationFlat = true
        }
      })
    },
    // 删除
    deletescope (row) {
      console.log(row)
      // 要根据id删除数据
      if (row.unDepend.length > 0) {
        // 提示同步删除资源
        let name = []
        row.unDepend.forEach(item => {
          name.push(item.name)
        })
        console.log(name)
        // 弹出提示关联的信息
        this.$confirm(`资源${row.authObjectDesc}与资源${name.toString()}存在依附关系,同步删除所有相关资源。`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //  确定的事件  循环删除响应的数据
          console.log(this.resourceApplyList)
          for (let i = this.resourceApplyList.length-1; i >=0; i--) {
            for (let index = 0; index < row.unDepend.length; index++) {
              console.log(this.resourceApplyList[i])
              if (this.resourceApplyList[i].authObjectId == row.unDepend[index].id) {
                this.resourceApplyList.splice(i, 1)
                break
              }
            }
          }
          this.resourceApplyList.forEach((item, index) => {
            if (item.authObjectId == row.authObjectId) {
              this.resourceApplyList.splice(index, 1)
            }
          })
        })
      } else {
        this.resourceApplyList.forEach((item, index) => {
          if (item.authObjectId == row.authObjectId) {
            this.resourceApplyList.splice(index, 1)
          }
        })
      }
    },
    // 批量删除
    batchdelete () {
      if (this.$refs.resourceref.selection.length == '0') {
        this.$message({
          type: 'warning',
          message: '未选择行数据'
        })
        return
      }
      // 进行删除操作
      this.$refs.resourceref.selection.forEach(item => {
        this.resourceApplyList.forEach((item2, index) => {
          if (item.authObjectId == item2.authObjectId) {
            this.resourceApplyList.splice(index, 1)
          }
        })
      })
    },
    saveTable () {
      this.tableEditable = false;
    },
    submit () {
      // 判断是否是编辑状态
      if (this.tableEditable == true) {
        this.$message({
          type: 'warning',
          message: '数据还未保存'
        })
        return
      }
      console.log(this.resourceApplyList)
      this.resourceApplyList.forEach(item => {
        item.resourceName = item.authObjectDesc
        item.resourceId = item.authObjectId
        item.resourceUrl = item.otherUrls
        item.platformName = 'PAAS'
      })
      this.formData.resourceApplyList = this.resourceApplyList
      console.log(this.formData)
      if (this.orderNo == undefined) {
        this.$refs["formref"].validate((valid) => {
          if (valid) {
            this.$http({
              url: '/api/work/order/apply/',
              method: 'post',
              data: this.formData
            }).then(res => {
              this.$router.push('/resApplyWorkOrderManagement')
            })
          }
        })
      } else {
        // 流转
        let data = {
          operOpinions: this.roamformInline.operOpinions,
          operType: this.roamformInline.operType,
          orderNo: this.orderNo,
          // 用户id
          roleId: this.roamformInline.roleId,
          source:'1'
        }
        // 如果有流转
        if (this.roamflat != '1') {
          this.$refs["roamdialog"].validate((valid) => {
            if (valid) {
              // 流转接口
              this.$http({
                url: '/api/work/track',
                method: 'post',
                data: data
              }).then(res => {
                this.formData.orderNo = this.orderNo,
                  // 修改的接口
                  this.$http({
                    url: '/api/work/order/apply/update',
                    method: 'POST',
                    data: this.formData
                  }).then(res => {
                    console.log(res)
                    this.$router.push('/resApplyWorkOrderManagement')
                  })
              })
            }
          })
        } else {
          this.formData.orderNo = this.orderNo,
            // 修改的接口
            this.$http({
              url: '/api/work/order/apply/update',
              method: 'POST',
              data: this.formData
            }).then(res => {
              console.log(res)
              this.$router.push('/resApplyWorkOrderManagement')
            })
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.resource-apply {
  height: calc(100vh - 100px);
  background-color: #f8f8f8;
  padding: 5px 30px 10px;

  .main {
    height: 92%;
    background-color: white;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 20px;
    .title-info {
      position: relative;
      margin: 10px 0 15px;
      &::before {
        position: absolute;
        content: '';
        display: block;
        width: 3px;
        height: 90%;
        background-color: #55aaff;
        left: -8px;
        top: 6%;
      }
    }
  }
}
span.success {
  color: #67c23a;
}
</style>
<style scoped>
#petition /deep/ .is-disabled {
  display: none;
}
#petition /deep/ .el-table__row > td {
  border: none;
}
#petition /deep/ .el-table::before {
  height: 0px;
}
#petition /deep/ .el-table .el-table__cell {
  padding: 5px 0;
}
</style>